<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div id="consumption"></div>
  </template>
    
    <script lang="ts" setup>
  import { onMounted } from "vue";
  import * as echarts from "echarts";
  
  onMounted(() => {
    var chartDom = document.getElementById("consumption");
    var myChart = echarts.init(chartDom);
    var option;
  
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "10%",
        right: "5%",
        left: "12%",
        bottom: "30%",
      },
      xAxis: [
        {
          type: "category",
          axisLabel: {
            color: "#fff",
            interval: 0,
            fontSize: 14,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#0a3e98",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#195384",
              type: "dotted",
            },
          },
          data: ["6", "8", "10", "12", "14", "16", "18", "20", "22", "24"],
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          nameTextStyle: {
            color: "#fff",
            fontSize: 22,
          },
          axisLine: {
            lineStyle: {
              color: "#0a3e98",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3e98",
              type: "dotted",
            },
          },
          axisLabel: {
            formatter: "{value}度",
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        },
        {
          type: "value",
          min: 0,
          nameTextStyle: {
            color: "#fff",
            fontSize: 22,
          },
          axisLine: {
            lineStyle: {
              color: "#0a3e98",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3e98",
              type: "dotted",
            },
          },
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              fontSize: 22,
            },
          },
        },
      ],
      series: [
        {
          name: "1",
          type: "pictorialBar",
          symbolSize: [20, 10],
          symbolOffset: [0, -6],
          symbolPosition: "end",
          z: 12,
          // "barWidth": "0",
          tooltip: {
            show: false,
          },
          color: "#008ed7",
          data: [2, 30, 50, 80, 120, 150, 180, 170, 150, 135],
          itemStyle: {
            color: "rgb(255, 187, 0)", // 设置所有柱子的颜色为黄色
          },
        },
        {
          name: "",
          type: "pictorialBar",
          symbolSize: [20, 10],
          symbolOffset: [0, 7],
          // "barWidth": "20",
          z: 12,
          tooltip: {
            show: false,
          },
          color: "yellow",
          data: [2, 30, 50, 80, 120, 150, 180, 170, 150, 135],
        },
        {
          type: "bar",
          //silent: true,
          barWidth: "20",
          barGap: "10%", // Make series be overlap
          barCateGoryGap: "10%",
          itemStyle: {
            normal: {
              color: "yellow",
              opacity: 1,
            },
          },
          data: [2, 30, 50, 80, 120, 150, 180, 170, 150, 135],
        },
        {
          name: "2",
          type: "line",
          yAxisIndex: 1,
          // symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          smooth: true,
          symbolSize: 0,
          lineStyle: {
            normal: {
              width: 8,
              color: "#29a5d5", // 线条颜色
            },
          },
          itemStyle: {
            normal: {
              color: "#071c33", //拐点颜色
              borderColor: "#2db6e9", //拐点边框颜色
              borderWidth: 2, //拐点边框大小
              // label: {
              //    show: true, //开启显示
              //    color: '#fff',
              //    position: 'top', //在上方显示
              //    formatter: function (res) {
              //       if (res.value) {
              //          return res.value
              //       } else {
              //          return 0
              //       }
              //    },
              // },
            },
          },
          // symbolSize: 8,   //设定实心点的大小
          areaStyle: {
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#29a5d530",
                  },
                  {
                    offset: 0.6,
                    color: "#29a5d520",
                  },
                  {
                    offset: 1,
                    color: "#29a5d510",
                  },
                ],
                false
              ),
            },
          },
        },
      ],
    };
  
    option && myChart.setOption(option);
    //监听窗口变化
    window.addEventListener("resize", function () {
      console.log("监听窗口变化");
      myChart.resize();
    });
  });
  </script>
    
    <style scoped>
  #consumption {
    width: 41vw;
    height: 40vh;
  }
  </style>